#container{
	position:relative;
	min-height:100%;
	#mobile-nav{
		display: none;
		.overlay{
			height: 110px;
			position: absolute;
			width: 100%;
			background: rgba(255,255,255,0.2);
			&.fixed{
				background: #4d4d4d;
		        position: fixed;
		        height: 42px;
		        z-index: 99;
		    }
		}
		#header{
			padding: 10px 0 0 0;
			.profilepic{
				display: block;
				position: relative;
				z-index: 100;
			}
			.header-menu{
				height: auto;
				margin: 10px;
				ul{
					text-align: center;
					cursor: default;
				}
				li{
					display: inline-block;
					margin: 3px;
				}
			}
		}
	}
	.left-col {
		// background: rgba(255,255,255,0.2);
		width: 300px;
		position: fixed;
		transition: all .2s ease-in;
		opacity: 0.8;
		top: 10px;
		left: 10px;
		bottom: 10px;

		-webkit-box-shadow: 0px 0px 30px #000;
		-moz-box-shadow: 0px 0px 30px #000;
		-ms-box-shadow: 0px 0px 30px #000;
		-o-box-shadow: 0px 0px 30px #000;
		box-shadow: 0px 0px 30px #000;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		-ms-border-radius: 20px;
		-o-border-radius: 20px;
		border-radius: 20px;
		.intrude-less {
			width: 76%;
			text-align: center;
			margin: 112px auto 0;
		}
		z-index: 1;
	}
	.mid-col {
		position:absolute;
		right:0;
		top: 0;
		min-height:100%;
		left: 300px;
		width: auto;
	}

	@media screen and (max-width:1040px) {

	}@media screen and (max-width:800px) {
		@import "_partial/mobile"
	}
}
.header-author{
	text-align: center;
	margin: 0.67em 0;
	font-family: Roboto, "Roboto", serif;
	font-size: 30px;
	transition: 0.3s;
}
#header{
	width:100%;
	a {
		color: #FFF;
		&:hover {
			color: #B0A0AA;
		}
	}
	.profilepic{
		text-align: center;
		display: block;
		box-shadow: 0 0 30px 2px #000;
		border-radius: 50%;
		padding: 10px;
		box-sizing: border-box;
		width: 128px;
		height: 128px;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
		-webkit-transition: all .6s ease-in;
		display: -webkit-box;
		-webkit-box-orient: horizontal;
		-webkit-box-pack: center;
		-webkit-box-align: center;
		text-align: center;
		img{
			width: 20%;
			height: 20%;
			border-radius: 50%;
			opacity: 0;
			-webkit-transition: all .6s ease-in;
		}
		&.show{
			transform: rotateY(360deg);
			img {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		&:hover{
			transform: rotateY(180deg);
		}
	}
	.header-subtitle{
		text-align: center;
		color: #00FFCC;
		font-weight: bolder;
		font-size: 16px;
		line-height: 25px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.header-subtitle:hover{
		color: #FF0099;
	}
	.header-menu{
		font-weight: 300;
		line-height: 31px;
		cursor: pointer;
		text-transform: uppercase;
		float:none;
		height: 150px;
		margin-left: -12px;
		text-align: center;
		display: -webkit-box;
		-webkit-box-orient: horizontal;
		-webkit-box-pack: center;
		-webkit-box-align: center;
		li{
			width:100px;
			margin: 0 auto;
			margin-top: 10px;
			padding: 0px 5px;
			-webkit-box-shadow: 0px 0px 10px 2px #000;
			-moz-box-shadow: 0px 0px 10px 2px #000;
			-ms-box-shadow: 0px 0px 10px 2px #000;
			-o-box-shadow: 0px 0px 10px 2px #000;
			box-shadow: 0px 0px 10px 2px #000;
			border-radius: 10px;
			cursor: default;
			a{
				color: #fff;
				font-size: 14px;
				min-width: 300px;
			}
			a:hover{
				color: orange;
			}
		}
	}
	.switch-area{
		position: relative;
		width: 100%;
		overflow: hidden;
		min-height: 500px;
		font-size: 14px;
		.switch-wrap{
			transition: transform .3s ease-in;
			position: relative;
		}
	}
	.turn-left{
	    transform: translate(-100%, 0 );
	}
	.header-nav{
		width: 100%;
		position: absolute;
		transition: transform .3s ease-in;
		.social {
			margin-right:15px;
			margin-top:10px;
			text-align: center;
			a {
				border-radius:50%;
				display:-moz-inline-stack;
				display:inline-block;
				vertical-align:middle;
				*vertical-align:auto;
				zoom:1;
				*display:inline;
				text-indent:-9999px;
				margin:0 8px 15px 8px;
				opacity:0.7;
				width:28px;
				height:28px;
				transition:0.3s;
				&:hover {
					opacity:1
				}
			}
			a:last-of-type {
				margin-right:0
			}
			a.weibo {
				background:url('/img/weibo.png') center no-repeat #aaaaff;
				border:1px solid #aaaaff;
				&:hover {
					border:1px solid #aaaaff;
				}
			}
			a.rss {
				background:url('/img/rss.png') center no-repeat #ef7522;
				border:1px solid #ef7522;
				&:hover {
					border:1px solid #cf5d0f;
				}
			}
			a.github {
				background:url('/img/github.png') center no-repeat #3F4E76;
				border:1px solid #afb6ca;
				&:hover {
					border:1px solid #909ab6;
				}
			}
			a.facebook {
				background:url('/img/facebook.png') center no-repeat #3b5998;
				border:1px solid #3b5998;
				&:hover {
					border:1px solid #2d4373;
				}
			}
			a.google {
				background:url('/img/google.png') center no-repeat #c83d20;
				border:1px solid #c83d20;
				&:hover {
					border:1px solid #9c3019;
				}
			}
			a.twitter {
				background:url('/img/twitter.png') center no-repeat #55cff8;
				border:1px solid #55cff8;
				&:hover {
					border:1px solid #24c1f6;
				}
			}
			a.linkedin {
				background:url('/img/linkedin.png') center no-repeat #005a87;
				border:1px solid #005a87;
				&:hover {
					border:1px solid #006b98;
				}
			}
			a.zhihu {
				background:url('/img/zhihu.png') center no-repeat #0078d8;
				border:1px solid #0078d8;
				&:hover {
					border:1px solid #0078d8;
				}
			}
			a.douban {
				background:url('/img/douban.png') center no-repeat #06c611;
				border:1px solid #06c611;
				&:hover {
					border:1px solid #06c611;
				}
			}
			a.mail {
				background:url('/img/mail.png') center no-repeat #005a87;
				border:1px solid #005a87;
				&:hover {
					border:1px solid #006b98;
				}
			}
			a.qq {
				background:url('/img/qq.png') center no-repeat #005a87;
				background-size: 100%;
				border:1px solid #005a87;
				&:hover {
					border:1px solid #006b98;
				}
			}
		}
	}
	.switch-part{
		width: 100%;
		position: absolute;
	}
	.switch-part1{
		left: 0;
	}
	.switch-part2{
		left: 100%;
		top: 20px;
		overlay-x: hidden;
		overflow-y: auto;
		max-height: 200px;
	}
	.switch-part3{
		left: 200%;
		line-height: 30px;
		.switch-friends-link{
			margin-right: 9px;
			border-radius: 3px;
			padding: 5px;
			&:hover{
				background: #88acdb;
				color: #fff;
			}
		}
	}
	.switch-part4{
		left: 300%;
		text-align: left;
		line-height: 30px;
	}
}

.duoshuo{
	padding: 0 40px;
}

#disqus_thread{
	padding: 0 40px;
}

#particles-js {
	position: fixed;
	width: 100%;
	height: 100%;
}
